<template>
    <div>
        <h3>欢迎登录</h3>
        <form action="" method="get">
            <p><input type="text" placeholder="请输入用户名"></p>
            <p><input type="password" placeholder="请输入密码"></p>
            <p><input type="submit" value="立即登录"></p>
        </form>
        <hr>

        <div id="box">
            <h3>欢迎登录</h3>
            <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>
        <hr>



    </div>


</template>

<script>
export default {
    name: "FormView",
    data(){
        return{
            form:{
                username:'',
                password:''

            },
            rules: {
                username: [
                    //required 必填项 message trigger：校验的触发时机 失去焦点时
                    //学会读文档
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                    //min:最小长度 max:最大长度
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 6 到 12 个字符', trigger: 'blur' }
                ]

            }
        }
    },
    methods:{
        onSubmit(){
            //通过js代码校验表单数据是否符合要求 this.$refs 获取当前组件中所有包含ref属性
            this.$refs.form.validate((valid) => {
               //表单校验通过 true 否则 false
                if (valid) {
                    alert('submit!');
                    console.log(JSON.stringify(this.form))
                } else {
                    console.log('请填写必要数据');
                    return false;
                }
            });

            //发送http请求 验证用户数据 搭建后台环境
        },

    }

}
</script>

<style scoped>
#box{
    width:300px;
    margin:0 auto;


}
#box>h3{
    color: #ff5600;
}



</style>